<template>
    <div class="box">
        <div class="operate">
            <el-input placeholder="用户/订单" v-model="pagination.queryString" style="width: 200px"></el-input>
            <el-button @click="findPage()" class="query">查询</el-button>
            <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
        </div>
        <el-card class="box-card">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="oid" align="center" label="订单编号"></el-table-column>
                <el-table-column prop="uid" label="用户"></el-table-column>
                <el-table-column prop="pid" label="车位"></el-table-column>
                <el-table-column prop="vid" label="小区">
                    <template slot-scope="scope">
                        {{getVillageName(scope.row.vid)}}
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="价格"></el-table-column>
                <el-table-column prop="otime" label="下单时间"></el-table-column>
                <el-table-column prop="state" label="状态"></el-table-column>
                <el-table-column prop="remarks" label="备注"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class="pagiantion" @current-change="handleCurrentChange"
                :current-page="pagination.currentPage" :page-size="pagination.pageSize"
                layout="total, prev, pager, next, jumper" :total="pagination.total">
            </el-pagination>
        </el-card>

        <!-- 新增订单 -->
        <el-dialog title="新增房产" :visible.sync="addVisible" width="40%">
            <span>
                <el-form ref="registerForm" :model="addForm" label-width="110px">
                    <el-form-item label="用户">
                        <el-input v-model="addForm.uid"></el-input>
                    </el-form-item>
                    <el-form-item label="车位">
                        <el-input v-model="addForm.pid"></el-input>
                    </el-form-item>
                    <el-form-item label="小区">
                        <el-input v-model="addForm.vid"></el-input>
                    </el-form-item>
                    <el-form-item label="价格">
                        <el-input v-model="addForm.price"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select v-model="addForm.state" placeholder="请选择订单状态">
                            <el-option label="交易成功" value="1"></el-option>
                            <el-option label="审核中" value="0"></el-option>
                            <el-option label="交易失败" value="-1"></el-option>
                            <el-option label="摇号成功" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="addForm.remarks"></el-input>
                    </el-form-item>
                </el-form>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false" style="font-weight: bold">取 消</el-button>
                <el-button type="primary" style="font-weight: bold" @click="handleAdd">添加</el-button>
            </span>
        </el-dialog>

        <!-- 修改弹窗 -->
        <el-dialog title="修改房产" :visible.sync="editVisible" width="40%">
            <span>
                <el-form ref="registerForm" :model="editForm" label-width="110px">
                    <el-form-item label="用户">
                        <el-input v-model="editForm.uid"></el-input>
                    </el-form-item>
                    <el-form-item label="车位">
                        <el-input v-model="editForm.pid"></el-input>
                    </el-form-item>
                    <el-form-item label="小区">
                        <el-input v-model="editForm.vid"></el-input>
                    </el-form-item>
                    <el-form-item label="价格">
                        <el-input v-model="editForm.price"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select v-model="editForm.state" placeholder="请选择订单状态">
                            <el-option label="交易成功" :value="1"></el-option>
                            <el-option label="审核中" :value="0"></el-option>
                            <el-option label="交易失败" :value="-1"></el-option>
                            <el-option label="摇号成功" :value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="editForm.remarks"></el-input>
                    </el-form-item>
                </el-form>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false" style="font-weight: bold">取 消</el-button>
                <el-button type="primary" style="font-weight: bold" @click="handleEdit">更新</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>

export default {
    name: 'VillageManage',

    data() {
        return {
            tableData: [],
            addVisible: false,
            editVisible: false,
            addForm: {},
            editForm: {},
            villages:[],
            pagination: {
                //分页相关模型数据
                currentPage: 1, //当前页码
                pageSize: 10, //每页显示的记录数
                total: 0, //总记录数
                queryString: "", //查询条件
            },
        };
    },

    mounted() {
        this.findPage()
        this.getVillageAll()
    },
    methods: {
        // 分页查询
        findPage() {
            this.$http.post(this.baseURL + "/order/findPage", this.pagination).then(res => {
                // 获取数据
                this.pagination.total = res.data.total;
                this.tableData = res.data.rows;
            })
        },
        // 新建
        handleCreate() {
            this.addForm = {};
            this.addVisible = true;
        },
        // 确认添加
        handleAdd() {
            this.$http.post(this.baseURL + "/order/add", this.addForm).then(res => {
                console.log(res.data)
                if (res.data.flag) {
                    this.$message.success(res.data.message);
                    this.addVisible = false;
                    this.findPage();
                } else {
                    this.$message.error(res.data.message);
                }
            })
        },
        // 更新
        handleUpdate(row) {
            console.log(row)
            this.$http(this.baseURL + "/order/findById?id=" + row.oid).then(res => {
                if (!res.data.flag) {
                    this.$message.error(res.data.message)
                } else {
                    this.$message.success(res.data.message)
                    this.editForm = res.data.data;
                    this.editVisible = true;
                }
            })
        },
        handleEdit() {
            this.$http.post(this.baseURL + "/order/update", this.editForm).then(res => {
                if (!res.data.flag) {
                    this.$message.error(res.data.message);
                } else {
                    this.$message.success(res.data.message);
                    this.editVisible = false;
                    this.findPage()
                }
            })
        },
        // 删除
        handleDelete(row) {
            this.$confirm("确认关闭？")
                .then(() => {
                    this.$http.get(this.baseURL + "/order/delete?id=" + row.oid).then(res => {
                        if (!res.data.flag) {
                            this.$message.error(res.data.message)
                        } else {
                            this.$message.success(res.data.message)
                            this.findPage()
                        }
                    })
                })

        },
        //切换页码
        handleCurrentChange(currentPage) {
            // 更新页码
            this.pagination.currentPage = currentPage;
            // 重新调用findPage
            this.findPage();
        },
        // 获取小区名称
        getVillageName(vid) {
            for(var i=0; i <= this.villages.length; i++) {
                var t = this.villages[i];
                if(t.vid == vid) return t.vname
            }
           
        },
        getVillageAll() {
            this.$http(this.baseURL + "/village/findAll").then(res => {
                this.villages = res.data.data
            })
        },
    },
};
</script>

<style lang="less" scoped>
.box {
    padding: 0 20px;

    .operate {
        margin-bottom: 10px;

        .query {
            margin-left: 10px;
        }
    }
}
</style>